<template>
  <view class="index-wraps">
    <h-swiper :img-srcs="imgArr"></h-swiper>
    <view class="index-wrap">

    <!-- 活动   -->
      <!-- 场馆列表   -->
      <view class="index-ticket-wrap">
        <view class="index-title-wrap">
          <view class="index-line"></view>
          <text class="index-title">热门视频</text>
        </view>
        <view class="index-grid-wrap">
          <view class="index-content-item" @tap="handleShowVideo">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
            <text class="index-grid-title">视频1</text>
          </view>
          <view class="index-content-item" @tap="handleShowVideo">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
            <text class="index-grid-title">视频2</text>
          </view>
          <view class="index-content-item" @tap="handleShowVideo">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
            <text class="index-grid-title">视频3</text>
          </view>
        </view>
      </view>
    <!-- 电子门票   -->
    <view class="index-ticket-wrap">
      <view class="index-title-wrap">
        <view class="index-line"></view>
        <text class="index-title">电子泳票</text>
      </view>
      <view class="index-title-icon-wrap">
        <view :class="['index-title-icon-item', activeIndex === 1 ? 'index-title-icon-item-active' : '']" @tap="handleIcon(1)">
          <view class="index-title-icon">
            <view class="iconfont icon-quanbu index-title-icons"></view>
          </view>
          <view class="index-title-icon-txt">全部</view>
        </view>
        <view :class="['index-title-icon-item', activeIndex === 2 ? 'index-title-icon-item-active' : '']" @tap="handleIcon(2)">
          <view class="index-title-icon">
            <view class="iconfont icon-cika index-title-icons"></view>
          </view>
          <view class="index-title-icon-txt">次卡</view>
        </view>
        <view :class="['index-title-icon-item', activeIndex === 3 ? 'index-title-icon-item-active' : '']" @tap="handleIcon(3)">
          <view class="index-title-icon">
            <view class="iconfont icon-nianqiaxiaoshou index-title-icons"></view>
          </view>
          <view class="index-title-icon-txt">年卡</view>
        </view>
      </view>
      <view class="index-buy-ticket-wrap">
        <view class="index-buy-ticket-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">次卡</view>
            <view class="index-buy-desc">我是次卡介绍次卡介绍</view>
            <view class="index-buy-price">
              <text>30</text>
              <text class="index-unit">元</text>
            </view>
          </view>
          <view class="index-buy-btn">
            <view class="index-btn" @tap="handleBuy">购买</view>
          </view>
        </view>
        <view class="index-buy-ticket-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">次卡</view>
            <view class="index-buy-desc">我是次卡介绍次卡介绍</view>
            <view class="index-buy-price">
              <text>30</text>
              <text class="index-unit">元</text>
            </view>
          </view>
          <view class="index-buy-btn">
            <view class="index-btn" @tap="handleBuy">购买</view>
          </view>
        </view>
        <view class="index-buy-ticket-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">次卡</view>
            <view class="index-buy-desc">我是次卡介绍次卡介绍</view>
            <view class="index-buy-price">
              <text>30</text>
              <text class="index-unit">元</text>
            </view>
          </view>
          <view class="index-buy-btn">
            <view class="index-btn" @tap="handleBuy">购买</view>
          </view>
        </view>
        <view class="index-buy-ticket-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">次卡</view>
            <view class="index-buy-desc">我是次卡介绍次卡介绍</view>
            <view class="index-buy-price">
              <text>30</text>
              <text class="index-unit">元</text>
            </view>
          </view>
          <view class="index-buy-btn">
            <view class="index-btn" @tap="handleBuy">购买</view>
          </view>
        </view>
        <view class="index-buy-ticket-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">次卡</view>
            <view class="index-buy-desc">我是次卡介绍次卡介绍</view>
            <view class="index-buy-price">
              <text>30</text>
              <text class="index-unit">元</text>
            </view>
          </view>
          <view class="index-buy-btn">
            <view class="index-btn" @tap="handleBuy">购买</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 场馆列表   -->
    <view class="index-ticket-wrap">
      <view class="index-title-wrap">
        <view class="index-line"></view>
        <text class="index-title">场馆列表</text>
      </view>
      <view class="index-buy-ticket-wrap">
        <view class="index-buy-ticket-item index-venue-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">场馆1</view>
            <view class="index-buy-desc">我是场馆</view>
          </view>
        </view>
        <view class="index-buy-ticket-item index-venue-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">场馆1</view>
            <view class="index-buy-desc">我是场馆</view>
          </view>
        </view>
        <view class="index-buy-ticket-item index-venue-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">场馆1</view>
            <view class="index-buy-desc">我是场馆</view>
          </view>
        </view>
        <view class="index-buy-ticket-item index-venue-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">场馆1</view>
            <view class="index-buy-desc">我是场馆</view>
          </view>
        </view>
        <view class="index-buy-ticket-item index-venue-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">场馆1</view>
            <view class="index-buy-desc">我是场馆</view>
          </view>
        </view>
        <view class="index-buy-ticket-item index-venue-item">
          <view class="index-buy-left">
            <image src="https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v3d1250036fb064b10b09797f12dba27b7.png"/>
          </view>
          <view class="index-buy-content">
            <view class="index-buy-title">场馆1</view>
            <view class="index-buy-desc">我是场馆</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 视频弹窗     -->
      <view class="h-dialog" v-if="videoShow">
        <view class="h-dialog-mask"></view>
        <view class="h-dialog-content">
          <view class="h-close" @tap="handleCloseVideo">X</view>
          <video
            class="index-video"
            id="video"
            src="https://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
            initial-time="0"
            :controls="true"
            :autoplay="false"
            :loop="false"
            :muted="false"
          />
        </view>

      </view>

    <h-toast></h-toast>
    </view>
  </view>
</template>

<script>
/*import {
  request,
  requestData
} from '@/utils/http.js';
import uQRCode from '@/common/uqrcode.js'*/
import {
  request,
  requestData
} from '../../utils/http.js';
import Taro from "@tarojs/taro";
export default {
  data() {
    return {
      imgArr: [
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg',
        'https://pic4.58cdn.com.cn/nowater/lbgfe/image/n_v375c7ead47cbf4dcc8bbd89da0a05c6ce.jpg'
      ],
      videoShow: false,
      activeIndex: 1
    }
  },
  mounted() {

  },
  methods: {
    handleShowVideo() {
      this.videoShow = true
    },
    handleCloseVideo() {
      this.videoShow = false
    },
    handleBuy() {
      Taro.navigateTo({
        url: '/pages/ticketDetail/index'
      })
    },
    handleIcon(index) {
      this.activeIndex = index
    }
  }
}
</script>

<style lang="less">
@import "./static/css/iconfont.css";
.index-wraps {
  width: 100%;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  box-sizing: border-box;
  background-image: linear-gradient(#fdfcf5, #fff);
}
.index-wrap {
  width: 100%;
  height: auto;
  padding: 0 30rpx;
  box-sizing: border-box;
}
.index-ticket-wrap {
  width: 100%;
  height: auto;
  min-height: 200rpx;
  border-radius: 20rpx;
  background-color: #fff;
  margin-top: 20rpx;
  padding: 23rpx 20rpx;
  box-sizing: border-box;
}
.index-title-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}
.index-line {
  width: 6rpx;
  height: 40rpx;
  background-color: #d5ad57;
  border-radius: 2PX;
  box-sizing: border-box;
}
.index-title {
  font-weight: bold;
  color: #010101;
  font-size: 32rpx;
  margin-left: 22rpx;
  box-sizing: border-box;
}
.index-title-icon-wrap {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 48rpx;
  box-sizing: border-box;
  border-bottom: 1PX solid #fbfbf1;
  padding-bottom: 32rpx;
}
.index-title-icon-item {
  width: 93rpx;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
}
.index-title-icon {
  width: 93rpx;
  height: 93rpx;
  background-color: #fdfbeb;
  border-radius: 50%;
  font-size: 28rpx;
  color: #d5ad57;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.index-title-icon-item-active .index-title-icon {
  background-color: #d5ad57;
  color: #fff;
  box-sizing: border-box;
}
.index-title-icons {
  font-size: 26PX;
  box-sizing: border-box;
}
.index-title-icon-txt {
  margin-top: 24rpx;
  color: #010101;
  font-size: 28rpx;
  box-sizing: border-box;
}
.index-buy-ticket-wrap {
  width: 100%;
  height: auto;
  overflow: hidden;
  box-sizing: border-box;
  padding-bottom: 34rpx;
}
.index-buy-ticket-item {
  width: 100%;
  height: auto;
  padding-bottom: 42rpx;
  border-bottom: 1PX solid #fbfbf1;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 34rpx;
}
.index-buy-left {
  width: 148rpx;
  height: auto;
}
.index-buy-left image {
  width: 148rpx;
  height: 148rpx;
  box-sizing: border-box;
  object-fit: contain;
  border-radius: 12rpx;
}
.index-buy-content {
  box-sizing: border-box;
  flex: 1;
  padding: 0 23rpx;
}
.index-buy-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #010000;
  box-sizing: border-box;
}
.index-buy-desc {
  color: #bbb;
  font-size: 24rpx;
  margin-top: 8rpx;
  box-sizing: border-box;
}
.index-buy-price {
  margin-top: 8rpx;
  color: #ef0c13;
  font-weight: bold;
  box-sizing: border-box;
}
.index-buy-btn {
  width: 133rpx;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.index-btn {
  width: 133rpx;
  height: 55rpx;
  border-radius: 27.5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 28rpx;
  color: #fff;
  background-image: linear-gradient(to right, #ff8400, #ff6002);
  box-sizing: border-box;
}
.index-venue-item {
  align-items: flex-start;
}
.index-grid-wrap {
  width: 100%;
  height: auto;
  display: grid;
  gap: 20rpx;
  grid-template-columns: 1fr 1fr 1fr;
  /* 两列，每列宽度相等 */
  grid-template-rows: auto;
  /* 自动高度 */
  margin-top: 20rpx;

}
.index-content-item {
  width: 1fr;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}
.index-content-item image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
}
.index-grid-title {
  color: #010101;
  font-size: 28rpx;
  margin-top: 10rpx;
  font-weight: 500;
}
.h-dialog {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
}
.h-dialog-mask {
  background-color: rgba(0,0,0,0.6);
  width: 100%;
  height: 100vh;
}
.h-close {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  font-size: 28rpx;
  color: #010101;
  border-radius: 50%;
  background-color: #fff;
  width: 50rpx;
  height: 50rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 9999;
}
.index-video {
  width: 100%;
  height: 350rpx;
}
.h-dialog-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  min-height: 350rpx;
  height: auto;
}
.index-venue-item .index-buy-left {
  width: 240rpx;
}
.index-venue-item .index-buy-left image {
  width: 240rpx;
}
</style>
